<template>
  <div class="plan01">
    <CrTitle>交通信息列表</CrTitle>
    <ul class="list-box" >
      <li v-for="item in datasList" class="list-box-item" @click="itemClickHandler(item)">
        <el-tag size="mini" :color="getTypeInfo(item).color">{{getTypeInfo(item).title}}</el-tag>
        <span style="padding-left: 0.2rem"> {{ item.data.name }}</span>
      </li>
    </ul>
  </div>
  <div class="plan02">
    <div class="legend-box">
      <div class="legend">
        <span>畅通</span>
        <ul>
          <li style="background-color: #34b000;"></li>
          <li style="background-color: #fecb00;"></li>
          <li style="background-color: #df0100;"></li>
          <li style="background-color: #8e0e0b;"></li>
        </ul>
        <span>拥堵</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import CrTitle from "../components/CrTitle.vue";
import TravelGuidInfoWindow from "../components/InfoWindow/TravelGuidInfoWindow.vue"
import {onUnmounted, ref} from 'vue'
import {AMapUtil} from "../utils/AMapUtil";
import {GlobalVariables} from "../GlobalVariables";
import {ElMessage} from 'element-plus'
import {JsUtil} from "../utils/JsUtil";
const datasList:any = ref([]);
const typeMapColor: any = {
  "交": "#f00",
  "水": "#3b43ff",
  "车": "#78ffd2",
  "灯": "#fff93e"
}
let placeSearchOverlayGroups: any = null;

function itemClickHandler(item:any){
    GlobalVariables.map.setZoomAndCenter(18, item.data.position);
}

function getData(isFitView: boolean = false) {
  removeData();
  // JsUtil.localStorageremoveItemAll("TravelGuide")
  const datas = JsUtil.localStorageGetItem("TravelGuide");
  datasList.value = datas;
  const markers = datas.map((item: any) => {
    const data = item.data;
    const typeInfo = item.typeAll[item.data.type];
    const marker: any = new AMap.Marker({
      title: data.name,
      extData: item,
      position: data.position,
      content: `<div style="background-color: ${typeInfo.color};" class="parkicon">${typeInfo.icon}</div>`,
      offset: new AMap.Pixel(-15, -15)
    });
    marker.on("click", (ree: any) => {
      AMapUtil.createInfoWindow(TravelGuidInfoWindow, marker.getPosition(), item)
    })
    return marker;
  });
  placeSearchOverlayGroups = new AMap.OverlayGroup(markers);
  GlobalVariables.map.add(placeSearchOverlayGroups);
  if (isFitView) {
    GlobalVariables.map.setFitView(markers)
  }
}
function getTypeInfo(item:any){
  return item.typeAll[item.data.type]
}

function removeData() {
  if (placeSearchOverlayGroups) {
    GlobalVariables.map.remove(placeSearchOverlayGroups);
  }
}
AMapUtil.onMapLoaded(() => {
  AMapUtil.showTraffic();
  GlobalVariables.map.setZoomAndCenter(14, GlobalVariables.curPosition);
  getData(true);
})
onUnmounted(() => {
  AMapUtil.hideTraffic();
  AMapUtil.clearDriving();
  AMapUtil.removeDragMarker();
  removeData();
})
</script>

<style scoped lang="less">
.plan01 {
  height: 80%;
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  width: 4rem;
  background-color: #304a4f;

  .list-box {
    padding: 0.2rem;
    box-sizing: border-box;
    .list-box-item{
      border-radius: 0.05rem;
      cursor: pointer;
      padding: 0.1rem;
      border-bottom: 0.01rem solid #1e2d2e;
      &:hover{
        background-color: #1e2d2e;
      }
    }
  }
}

.plan02 {
  position: fixed;
  top: 0.8rem;
  right: 0.2rem;
  background-color: #304a4f;

  .legend-box {
    padding: 0 0.1rem;
    display: flex;
    justify-content: center;

    .legend {
      display: flex;
      align-items: center;
      justify-content: center;

      ul {
        display: flex;
        align-items: center;
        padding: 0 0.1rem;

        li {
          width: 0.2rem;
          height: 0.05rem;
          background-color: #fff;
          border-radius: 0.01rem;
          margin: 0 0.01rem;
        }
      }
    }
  }
}
</style>
